<template>
    <div class="list_page_div">
		<page-list :loading="loading" :table-config="tableConfig" :data-list="dataList" :height="height" show-index
				   show-page :total="total" :currentPage="param.pageNum" :pageSize="param.pageSize" @currentChange="handleCurrentChange"
				   show-operate show-expand>
            <template #searchArea>
                <el-input v-model="param.fileName" clearable placeholder="文件名称" style="width: 200px;"></el-input>
                <el-button type="primary" @click="searchList">查询</el-button>
                <el-button type="primary" @click="resetData">重置</el-button>
                <el-button type="primary" @click="exeImport" v-if="userId==1">导入</el-button>
                <el-button type="primary" @click="exeExport">导出</el-button>
            </template>
            
            <template #expandContent="scope">
                <div class="table_info">
                    <div class="table_item_info">
                        <label>固定ID：</label>
                        <span>{{ scope.row.fixedId }}</span>
                        <label>文件访问地址：</label>
                        <span>{{ $store.state.fileURL + scope.row.filePath }}</span>
                    </div>
                    <div v-if="scope.row.fileSuffix==='.png'||scope.row.fileSuffix==='.jpg'||scope.row.fileSuffix==='.gif'"
                         class="file-view-div">
                        <img :src="$store.state.fileURL + scope.row.filePath" height="400px" alt=""/>
                    </div>
                    <div v-else-if="scope.row.fileSuffix==='.pdf'" class="file-view-div">
                        <iframe :src="$store.state.fileURL + scope.row.filePath" height="400px" width="100%"></iframe>
                    </div>
                    <div v-else-if="scope.row.fileSuffix==='.txt'" class="file-view-div">
                        <iframe :src="$store.state.fileURL + scope.row.filePath" height="400px" width="100%"></iframe>
                    </div>
                    <div v-else class="file-view-div">
                        <iframe :src="$store.state.viewUrl + getUrl(scope.row)" height="400px" width="100%"></iframe>
                    </div>
                </div>
            </template>
            
            <template #operateContent="scope" v-if="userId==1">
                <el-button type="text" @click="$common.downloadFile(scope.row.id)">下载</el-button>
            </template>
        </page-list>
        <import-file :visible.sync="showImport" :file-code="fileCode" :import-url="importUrl" @change="searchList"></import-file>
    </div>
</template>

<script>
import PageList from "@/components/grid/pageList";
import ImportFile from "@/components/upload/importFile.vue";

export default {
    name: "fileList",
    components: {ImportFile, PageList},
    data() {
        return {
            height: '500px',
            sonHeight: 300,
            loading: false,
            showImport: false,

            fileCode: 'templateFile',
            importUrl: '/CHILD_SYSTEM/baseUploadFile/importData',

            id: '',
            
            tableConfig: [
                {label: "文件编号", prop: "fileCode", width: 160},
                {label: "文件名称", prop: "fileName", width: 260},
                {label: "文件路径", prop: "filePath", minWidth: 300},
                {label: "上传人", prop: "uploadUserName", width: 160},
                {label: "上传时间", prop: "uploadTime", width: 160},
            ],
            dataList: [],
            total: 0,
            param: {
                fileName: '',
                field: 'upload_time',
                order: 'desc',
                pageSize: 20,
                pageNum: 1,
            },

            userId: '',
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.userId = this.$root.getStorage('userId');
            this.height = (document.body.offsetHeight - 185) + "px";
        })
        this.searchList();
    },
    methods: {
        handleCurrentChange(val) {
            this.param.pageNum = val;
            this.searchList();
        },
        resetData() {
            this.param.fileName = '';
            this.param.pageNum = 1;
            this.searchList();
        },
        searchList() {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/baseUploadFile/getPageList", this.param).then(res => {
                this.total = res.data.total;
                this.dataList = res.data.rows;
            }).finally(() => {
                this.loading = false;
            })
        },
        getUrl(row) {
            return this.$store.state.fileURL + row.filePath;
        },
        exeImport() {
            this.showImport = true;
        },
        exeExport() {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/baseUploadFile/exportData", this.param, 'arraybuffer').then(res => {
                this.$common.downloadData(res);
            }).finally(() => {
                this.loading = false;
            })
        },
    }
}
</script>

<style lang="scss">

</style>